<!--
 * @Description: 减脂营列表搜索信息
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-03-31 12:04:35
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-08 21:45:24
 -->
<template>
  <div class="head-container">
    <!-- 搜索  -->
    <treeselect v-model="query.channel_code" :options="secondChannels" :flatten-search-results="true" :disable-branch-nodes="true" style="width:200px;float: left; margin-right: 10px;" placeholder="请选择渠道" />
    <el-input placeholder="减脂营名称" style="width:200px;" class="filter-item" v-model="query.camp_name" />
    <el-date-picker v-model="query.start_date" type="date" placeholder="请选择开营时间" class="filter-item" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
    <!-- 新增  -->
    <div style="display: inline-block;margin: 0px 2px;">
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="$refs.form.dialog = true">新增</el-button>
      <eForm ref="form" :is-add="true" :second-channels="secondChannels" />
    </div>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import eForm from './form'

export default {
  components: { Treeselect, eForm },
  props: {
    query: {
      type: Object,
      required: true
    },
    supThis: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      secondChannels: [],
    }
  },
  mounted() {
    this.initParams()
  },
  methods: {
    initParams() {
      //查询渠道信息
      this.$api.enterprise.channel
        .cascadeSecond({
          params: { status: 1 }
        })
        .then(res => {
          this.secondChannels = res.data.channels
        }).catch(err => {
          console.log(err)
        })
    },
    toQuery() {
      this.$parent.page = 0
      this.$parent.init()
    }
  }
}
</script>
